<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- //引入axios包 -->
  <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <!-- 移入进度条包 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>
  <link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
</head>

<body>
  <button id="btn">发送axios请求</button>
</body>
<script>

  let btn = document.querySelector(`#btn`)

  // const myaxios = axios.create({
  //   baseURL: '/',
  //   timeout: 1000,
  //   headers: {}
  // });

    //创建axios实列对象

    //为什么 创建axios实列对象
    // 因为 在开发中有可能不止一个后台服务器接口 很可能是多个
    // 而其中部分一个接口的配置与另一部分接口的配置可能不一样，如何处理
    // 答案 建立多个axios  每一个都有自己的配置 ，应用于不同要求的接口中
  const myaxios = axios.create({
     //配置公共路径
    //基础路径 http://127:0.0.1:3000
     // 请求路径http://127:0.0.1:3000/create
    baseURL: '/',
     //配置超时事件
    timeout: 10000,
    //设置请求头
    headers: {}
  });



  btn.onclick = async function () {

    try {
      //使用myaxios发请求
      // 请求路径http://127:0.0.1:3000/create
       const re = await myaxios.get("/create",{

        params:{
          userId:"001"
        }

      })

      console.log(re);
      console.log(re.data);
      console.log(re.data.data);


    } catch (e) {
      console.log(e.message);
    }



  }

</script>

</html>